<ui:composition template="/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:s="http://jboss.com/products/seam/taglib"
                xmlns:cc="http://sourceforge.net/projects/jsf-comp">

    <ui:define name="styleone">
    </ui:define>

    <ui:define name="colunaEsquerda">
        <span style="color:#FFF">.</span>
    </ui:define>

    <ui:define name="conteudo">
        <br/>
        <center>
            <rich:messages layout="table"
                           errorClass="errorClass"
                           infoClass="infoClass"
                           warnClass="warnClass"
                           styleClass="painelMensagem"
                           ajaxRendered="true"/>
        </center>
        <br/>
        <h:form id="hospede">
            <rich:tabPanel id="tabPrincipal" switchType="server">
                <!-- Tab com as informações principais -->
                <rich:tab label="#{bundle.hospedeDadosPrincipais}">
                    <a4j:loadScript  type="text/javascript" src="/resources/scripts/jquery.maskedinput-1.1.4.js" />
                    <h:panelGrid cellspacing="2" cellpading="2" columns="2" columnClasses="field-names, fields">
                        <h:outputLabel for="opNome">
                            <h:outputText value="#{bundle.hospedeNome}: " />
                        </h:outputLabel>

                        <h:panelGroup>
                            <h:inputText id="itNome" value="#{hospedeAction.hospede.nome}" label="#{bundle.hospedeNome}" size="50" required="true" />
                            <h:outputText value=" campo obrigatorio" />
                        </h:panelGroup>

                        <h:outputLabel for="opIdentidade">
                            <h:outputText value="#{bundle.hospedeIdentidade}: " />
                        </h:outputLabel>

                        <h:inputText id="itIdentidade" value="#{hospedeAction.hospede.identidade}" label="#{bundle.hospedeIdentidade}" size="15" />

                        <h:outputLabel for="opCPF">
                            <h:outputText value="#{bundle.hospedeCPF}" />
                        </h:outputLabel>

                        <h:inputText id="itCpfHospede" value="#{hospedeAction.hospede.cpf}" label="#{bundle.hospedeCPF}" size="15">
                            <rich:jQuery selector="#itCpfHospede" query="mask('999.999.999-99')" timing="onload"/>
                        </h:inputText>

                        <h:outputLabel for="opTelefone">
                            <h:outputText value="#{bundle.hospedeTelefone}: " />
                        </h:outputLabel>

                        <h:inputText id="itTelefone" value="#{hospedeAction.hospede.telefone}" label="#{bundle.hospedeTelefone}" >
                            <rich:jQuery selector="#itTelefone" query="mask('(99)9999-9999')" timing="onload" />
                        </h:inputText>
                    </h:panelGrid>
                </rich:tab>
            </rich:tabPanel>
            <br/>
            <h:commandLink action="#{hospedeAction.criar}"
                           styleClass="link dr-toolbar-ext rich-toolbar"
                           reRender="dtAreaEquipe"
                           rendered="#{hospedeAction.operacaoAtual == 'CRIACAO'}">
                <h:graphicImage value="/resources/images/dialog-ok.png"/>
                <h:outputText value="#{messages.botaoOk}" />
            </h:commandLink>

            <h:commandLink action="#{hospedeAction.alterar}"
                           styleClass="link dr-toolbar-ext rich-toolbar"
                           reRender="dtAreaEquipe"
                           rendered="#{hospedeAction.operacaoAtual == 'ALTERACAO'}">
                <h:graphicImage value="/resources/images/dialog-ok.png"/>
                <h:outputText value="#{messages.botaoOk}" />
            </h:commandLink>

            <h:commandLink action="#{hospedeAction.cancelar}"
                           styleClass="link dr-toolbar-ext rich-toolbar"
                           immediate="true">
                <h:graphicImage value="/resources/images/dialog-cancel.png"/>
                <h:outputText value="#{messages.botaoCancelar}" />
            </h:commandLink>
            <br/><br/>
        </h:form>
    </ui:define>

    <ui:define name="colunaDireita">
        <span style="color:#FFF">.</span>
    </ui:define>
</ui:composition>